<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="workShopAddWinDialogVisible"
      title="添加车库"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="newWorkShop"  label-width="auto">

        <el-form-item  style="font-weight: bold" label="车间编码">
          <el-input v-model="newWorkShop.workShopCode"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="车间名称">
          <el-input v-model="newWorkShop.workShopName"/>
        </el-form-item>

        <el-form-item style="font-weight: bold;" label="面积">
          <el-input-number style="width: 220px" min="0" v-model="newWorkShop.area" step="0.1"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="负责人">
          <el-input v-model="newWorkShop.charge"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="是否启用">
          <el-radio-group v-model="newWorkShop.workShopStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="newWorkShop.remark" type="textarea"/>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelnewWorkShop">取消</el-button>
        <el-button type="primary" @click="newWorkShopSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {ElMessage} from "element-plus";
import workShopRequest from "@/api/workShop.js";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['addComplete','cancelWorkShopAdd'])

// 弹窗标记
let workShopAddWinDialogVisible = ref(false);

let props = defineProps(["isShow"]);
// 新增的车间对象
let newWorkShop = ref({area:0,workShopStatus:1});

/**
 * 取消新增按钮事件
 */
function cancelnewWorkShop(){
  newWorkShop = ref({area:0,workShopStatus:1});
  workShopAddWinDialogVisible.value = false;
  emits("cancelWorkShopAdd")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  cancelnewWorkShop();
  emits("cancelWorkShopAdd")
}

/**
 * 新增提交
 */
function newWorkShopSubmit(){
  workShopRequest.save(newWorkShop.value,res=>{
    if(res.code === 200){
      ElMessage({
        type:"success",
        message:"新增车间成功"
      });
      // 关闭弹窗
      cancelnewWorkShop();
      // 触发编辑完成的事件
      emits('addComplete',res.data);
    }else if (res.data == '车库编码不能为空') {
      ElMessage({
        type:"warning",
        message:"车库编码不能为空"
      });
    } else if (res.data == '车库名称不能为空') {
      ElMessage({
        type:"warning",
        message:"车库名称不能为空"
      });
    } else {
      ElMessage({
        type:"warning",
        message:"新增车间失败"
      });
    }
  })
}

/**
 * 侦听器 侦听 props.isShow
 */
watch(()=>props.isShow,()=>{
  workShopAddWinDialogVisible.value = props.isShow;
});


onMounted(()=>{
})
</script>
<style scoped>

</style>